<script setup>
import {reactive, ref, defineProps} from "vue";

const props = defineProps({
  comment: {
    avatar: String,
    name: String,
    level: Number,
    content: String,
    image: Array,
    goodsname: String
  }
})

</script>

<template>

  <el-divider/>
  <div class="app">
    <div class="leftPart">
      <el-avatar :size="50" :src="props.comment.avatar"></el-avatar>
      <div class="comment-user-name">{{ props.comment.name }}</div>
    </div>
    <div class="rightPart">
      <el-rate
          v-model="props.comment.level"
          :colors="['#E4393C', '#E4393C', '#E4393C']"
          disabled
          size="large"
          text-color="#E4393C"/>
      <div class="comment-content" style="margin-bottom: 10px">{{ props.comment.content }}</div>
      <el-image :preview-src-list="props.comment.image"
                :src="props.comment.image"
                style="width: 100px;margin-bottom: 10px"
      />
      <!--      <div>-->
      <!--        <el-image v-for="(item, index) in props.comment.image" :key="index" :src="item"-->
      <!--                  :preview-src-list="props.comment.image"-->
      <!--                  style="width: 100px;margin-bottom: 10px"-->
      <!--        />-->
      <!--      </div>-->
      <div class="comment-goodsname">{{ props.comment.goodsname }}</div>
    </div>
  </div>

</template>

<style scoped>

.app {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  align-content: flex-start;
  position: relative;
  top: -20px;
}

.leftPart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  top: 20px; /* 向下移动 20px */
  margin: 0 50px 0 10px;
}

.comment-user-name {
  -webkit-font-smoothing: antialiased;
  color: #666;
}

.comment-goodsname {
  color: #999;
  font: 12px / 150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.comment-content {
  white-space: pre-wrap;
  font-family: tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
}

.rightPart {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5px;
}

</style>